<template>
    <div class="container" >
        <div class="imgs">
            <img class="img"
                src=""
                alt="" v-lazyLoad="props.Info.imgUrl[0]">
        </div>
        <div class="remark">
            <van-text-ellipsis rows="2"
                :content="props.Info.remark" />
        </div>
        <div class="price">
            ￥{{props.Info.price}}
        </div>
        <div class="publisher">
            <div class="avatar">
                <img class="avatarImg"
                    :src="props.Info.avatar" alt="" >
            </div>
            <div class="nickname">
                {{props.Info.nickname}}
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>

const props = defineProps({
   /*  ImgHeight: {
        type: [String, Number],// 如果可能存在多个类型，则可以写成 [String,Number]
        default: '300',
        required: true// 是否必传 ，在不声明为true 的情况下，所有prop 默认为非必填。
    }, */
    Info:{
        type:Object,
        default:{}
    }
});


</script>

<style lang='less' scoped>
.container {
    width: 11rem;
    display: flex;
    height: auto;
    box-sizing: border-box;
    padding: 5px;
    flex-direction: column;
    justify-content: flex-start;
    gap: .4125rem;

    .imgs {
        .img {
            width: 100%;
            border-radius: 10px;
        }
    }
    .remark {
        font-size: 1rem;
        
    }

    .price {
        color: red;
        font-weight: 700;
        line-height: 1.25rem;
        height: 1.25rem;
        padding-left: 0.1875rem;
    }

    .publisher {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        gap: 15px;

        .avatar {
            .avatarImg {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .nickname {
            .textStyle();
        }
    }

}
</style>
